Understanding the User Control (.ascx) File

Here is the new_widget.ascx file that Pete uses as the basis of his widget.

<%@ Control Language=”C#” AutoEventWireup=”true” CodeFile=”new_widget.ascx.cs” Inherits=”widgets_new_widget” %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>
    <asp:MultiView ID="ViewSet" runat="server" ActiveViewIndex="0">
        <asp:View ID="View" runat="server">
            <!-- You Need To Do ..............................  -->
<asp:Label ID="TextLabel" runat="server"></asp:Label><br />
<asp:Label ID="CheckBoxLabel" runat="server"></asp:Label>
            <!-- End To Do ..............................  -->
        </asp:View>
        <asp:View ID="Edit" runat="server">
            <div id="<%=ClientID%>_edit">
                 <!-- You Need To Do ..............................  -->
<asp:TextBox ID="TextTextBox" runat="server" Style="width: 95%"> </asp:TextBox><br />
<asp:CheckBox ID="MyCheckBox" runat="server" Checked="false" />  <br />
                 <!-- End You Need To Do ..............................  -->
<asp:Button ID="CancelButton" runat="server" Text="Cancel" OnClick="CancelButton_Click" />
<asp:Button ID="SaveButton" runat="server" Text="Save" OnClick="SaveButton_Click" />
            </div>
        </asp:View>
</asp:MultiView>

Notice the following elements of the file.

The asp:MultiView element declares that the control has two possible modes: View and Edit.

<asp:MultiView ID="ViewSet" runat="server" ActiveViewIndex="0">

• in view mode, Pierre and the marketing team can see the control but not change it.
• in edit mode, Pete’s developers can change the control’s content and properties.

Between the multiview tags is information about the control in view mode. It has two fields: one is a text field, and the other is a check box.

<asp:View ID="View" runat="server">
<asp:Label ID="HelloTextLabel" runat="server"></asp:Label><br />
<asp:Label ID="CheckBoxLabel" runat="server"></asp:Label>
</asp:View>

Also between the multiview tags is information about the control in edit mode. In edit mode, a text box, a check box, and a Save button appear. The text box and check box collect end-user input, and the Save button saves that input to the database.

<asp:View ID="Edit" runat="server">
<div id="<%=ClientID%>_edit">
<!-- You Need To Do ..............................  -->
<asp:TextBox ID="HelloTextBox" runat="server" Style="width: 95%"> </asp:TextBox><br />
<asp:CheckBox ID="MyCheckBox" runat="server" Checked="false" />  <br />
<!-- End You Need To Do ..............................  -->
<asp:Button ID="CancelButton" runat="server" Text="Cancel" OnClick="CancelButton_Click" />
<asp:Button ID="SaveButton" runat="server" Text="Save" OnClick="SaveButton_Click" />